.kp_big_screen{
  width: 100%;
  height: 100%;
  padding:0.1rem 0.2rem 0.2rem 0.2rem;
  .show{
    display: block;
  }
  .hide{
    display: none;
  }
  .dim{
    opacity: 0.3;
  }
  .hight{
    opacity: 1;
  }
  .kp_screen_top{
    width: 100%;
    height: 7.31rem;
    position: relative;
    //border: 1px solid red;
    .kp_rank{
      float: left;
      width: 4.17rem;
      height: 7.31rem;
      background-image: url(../images/rank/rank_bg.png);
      background-repeat: round;
      margin-top: -0.2rem;
      position: relative;
      .rank_title{
        position: absolute;
        left:50%;
        -webkit-transform:translate(-50%) ;
        top:0.6rem;
        font-size:0.26rem;
        color: #4bc1fe;
      }
      .rank_con{
        position: absolute;
        width: 3.6rem;
        height: 2.8rem;
        left:50%;
        -webkit-transform:translate(-50%) ;
        top:1.05rem;
        .polygon6,.polygon5,.polygon4,.polygon3,.polygon2,.polygon1,.rank_books{
          width: 100%;
          height: 100%;
          padding: 0.06rem 0.1rem;
          background-repeat: round;
          -webkit-transition: all 1s;
        }
        .polygon6{
          position: relative;
          width: 100%;
          height: 100%;
          background-image: url(../images/rank/polygon6.png);
          background-repeat: round;
          .polygon5{
            background-image: url(../images/rank/polygon5.png);
            background-repeat: round;
            .polygon4{
              background-image: url(../images/rank/polygon4.png);
              background-repeat: round;
              .polygon3{
                background-image: url(../images/rank/polygon3.png);
                background-repeat: round;
                .polygon2{
                  background-image: url(../images/rank/polygon2.png);
                  background-repeat: round;
                  .polygon1{
                    background-image: url(../images/rank/polygon1.png);
                    background-repeat: round;
                    position: relative;
                    .rank_books {
                      width: 1.2rem;
                      padding: 0;
                      position: absolute;
                      left:50%;
                      top:50%;
                      -webkit-transform: translate(-50%,-50%);
                      img{
                        width: 100%;
                        position: absolute;
                        left:0;
                        top:0.25rem;
                      }
                    }
                  }

                }

              }

            }

          }
          .rank_flag{
            position: absolute;
            width: 0.5rem;
            height: 0.4rem;
            color:#fff;
            font-size: 0.14rem;
            line-height: 0.4rem;
            text-align: center;
          }
          .flag_left_top{
            left:17%;
            top:0;
            background-image: url(../images/rank/green_left.png);
            background-repeat: round;
          }
          .flag_left_mid{
            left:1%;
            top:41%;
            background-image: url(../images/rank/green_left.png);
            background-repeat: round;
          }
          .flag_left_bot{
            left:18%;
            bottom:-1%;
            background-image: url(../images/rank/green_left.png);
            background-repeat: round;
          }
          .flag_right_top{
            right:17%;
            top:0;
            background-image: url(../images/rank/green_right.png);
            background-repeat: round;
          }
          .flag_right_mid{
            right:1%;
            top:41%;
            background-image: url(../images/rank/green_right.png);
            background-repeat: round;
          }
          .flag_right_bot{
            right:18%;
            bottom:-1%;
            background-image: url(../images/rank/green_right.png);
            background-repeat: round;
          }
        }
      }
      .rank_des{
        position: absolute;
        width: 3.6rem;
        height: 3.4rem;
        left:0.3rem;
        bottom: 0.1rem;
        padding-top:0.08rem;
        //border:1px solid red;
        .rank_des_pub{
          width: 3.6rem;
          height: 0.46rem;
          line-height: 0.46rem;
          margin-bottom: 0.1rem;
          //border:1px solid red;
          padding-left:0.15rem;
          font-size: 0.18rem;
          color:#9ca4b2;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          span:nth-of-type(1){
            font-size: 0.16rem;
            margin-right: 0.3rem;
            color:#fff;
          }
        }


      }

    }
    .kp_banner{
      float: left;
      width: 8.2rem;
      height: 7.3rem;
      //border:1px solid green;
      margin:0 0.3rem;
      padding-top: 0.3rem;
      .banner_header{
        position: relative;
        width: 100%;
        height: 0.8rem;
        .left_bg{
          float: left;
          width: 2.04rem;
          img{
            width: 100%;
          }
        }
        .right_bg{
          float: right;
          width: 2.04rem;
          img{
            width: 100%;
          }
        }
        .header_logo{
          position: absolute;
          top:-5%;
          left: 50%;
          transform: translate(-50%);
          width: 4rem;
          img{
            width: 100%;
          }
        }
        p{
          position: absolute;
          top: 70%;
          left: 50%;
          transform: translate(-50%);
          font-size: 0.3rem;
          color: #4bc1fe;


        }
      }
      .banner_con{
        width: 100%;
        height: 77%;
        margin-top:0.2rem;
        .kp_line_title{
          position: relative;
          width:1.2rem;
          margin-left:0.4rem;
          margin-bottom: 0.2rem;
          img{
            width: 100%;
          }
          p:nth-of-type(1){
            position: absolute;
            width: 3rem;
            font-size:0.06rem;
            left:0.6rem;
            top:0.02rem;
            color:#2d6c8c;
          }
          p:nth-of-type(2){
            width: 3rem;
            position: absolute;
            font-size: 0.24rem;
            color: #4bc1fe;
            left:0.6rem;
            top:0.15rem;
          }
        }
        .banner_pic{
          height: 94%;
          margin-top:-10px;
          background-image: url(../images/banner/outer_border.png);
          background-repeat: round;
          padding: 1.5% 3% 6% 13%;
          overflow: hidden;
          position: relative;
          .banner_mid_bg{
            width: 96%;
            height: 92%;
            background-image: url(../images/banner/mid_border.png);
            background-repeat: round;
            position: relative;
            .swiper-container {
              width: 100%;
              height: 104%;
              margin:auto;
              border-radius: 10% 0 10% 0;
              border:1px solid #50b4ea;
              .swiper-wrapper{
                width: 100%;
                height: 100%;
                .swiper-slide{
                  width: 100%;
                  height: 100%;
                  text-align: center;
                  overflow: hidden;
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: -webkit-flex;
                  display: flex;
                  -webkit-box-pack: center;
                  -ms-flex-pack: center;
                  -webkit-justify-content: center;
                  justify-content: center;
                  -webkit-box-align: center;
                  -ms-flex-align: center;
                  -webkit-align-items: center;
                  align-items: center;
                  img{
                    width: 100%;
                  }

                }

              }
              #banner_video_all{
                width: 100%;
                height: 100%;
              }

            }
            #banner_mid_bg2{
              width: 100%;
              position: absolute;
              left:0;
              top:14%;

            }

          }
          .banner_run{
            width: 100%;
            overflow: hidden;
            padding-left:0.2rem;
            margin-top:4%;
            ul{
              li{
                float: left;
                list-style: none;
                width:0.06rem;
                margin-right:0.05rem;
                img{
                  width: 100%;
                }
              }
            }
          }
          .lamp_line{
            width: 80%;
            position: absolute;
            left:13%;
            bottom:0.3rem;
            img{
              width: 100%;
            }
          }
        }
      }
    }
    .kp_borrow{
      float: left;
      width: 5.7rem;
      height: 6.6rem;
      padding-top: 0.3rem;
      //border:1px solid yellow;
      .kp_date{
        color:#408fba;
        font-size: 0.2rem;
        .kp_weather{
          float: left;
          margin-right: 0.2rem;
          margin-left:0.4rem;
        }
        .kp_time{
          float: left;
          #kp_t{
            //margin-top: 0.08rem;
            #t_h,#t_m{
              font-size:0.4rem;
              font-weight: 700;
            }
            #t_s{
              font-weight: 700;
            }
            #t_current{
              font-size:0.1rem;
            }
          }
        }
      }
      .kp_line_title{
        position: relative;
        width:1.2rem;
        margin-top: 0.3rem;
        margin-bottom: 0.2rem;
        img{
          width: 100%;
        }
        p:nth-of-type(1){
          position: absolute;
          width: 3rem;
          font-size:0.06rem;
          left:0.6rem;
          top:0.02rem;
          color:#2d6c8c;
        }
        p:nth-of-type(2){
          width: 3rem;
          position: absolute;
          font-size: 0.24rem;
          color: #4bc1fe;
          left:0.6rem;
          top:0.15rem;
        }
      }
      .kp_line_con{
        width: 100%;
        height: 3.61rem;
        position: relative;
        padding-top:0.7rem;
        background-image: url("../images/BG1.png");
        background-repeat: round;
        #main3{
          margin:auto;
          width: 95%;
          height: 100%;
        }
        .line_title{
          position: absolute;
          left:50%;
          top:0.15rem;
          -webkit-transform: translate(-50%);
          font-size:0.26rem;
          color:#6ff2f7;
        }
      }
      .borrow_num{
        width: 100%;
        margin-top:0.1rem;
        ul{
          width: 100%;
          padding-left:0.6rem;
          li{
            float: left;
            text-align: left;
            color:#fff;
            margin-right: 0.2rem;
            p{
              margin-bottom: 0.03rem;
              color:#3d8a8e;
              font-size: 0.18rem;

            }
            span{
              color:#70f5fc;
              font-size: 0.36rem;
            }
            span:nth-of-type(2){
              font-size: 0.14rem;

            }

          }
        }
      }
    }
  }
  .kp_screen_bottom{
    width: 100%;
    height: 3.2rem;
    margin-top:0.1rem;
    //border:1px solid purple;
    .kp_count{
      width: 4.5rem;
      height: 3rem;
      float: left;
      //margin-right:0.2rem;
      .kp_line_title{
        position: relative;
        width:1.2rem;
        margin-left:0.4rem;
        margin-bottom: 0.2rem;
        img{
          width: 100%;
        }
        p:nth-of-type(1){
          position: absolute;
          width: 3rem;
          font-size:0.06rem;
          left:0.6rem;
          top:0.02rem;
          color:#2d6c8c;
        }
        p:nth-of-type(2){
          width: 3rem;
          position: absolute;
          font-size: 0.24rem;
          color: #4bc1fe;
          left:0.6rem;
          top:0.15rem;
        }
      }
      .count_num{
        width: 90%;
        height: 2.3rem;
        margin:-0.2rem 0 0 0.2rem;
        background-image: url(../images/count/count_bg.png);
        background-repeat: round;
        .count_num_top{
          width: 100%;
          height: 1.6rem;
          padding-top: 0.1rem;
          ul{
            width: 100%;
            height: 100%;
            padding: 5% 8% 1% 6%;
            li{
              float: left;
              width: 33.33%;
              height: 100%;
              .num_left{
                float: left;
                color:#fff;
                font-size:0.2rem;
                text-align: right;
                margin-right: 0.08rem;
                p:nth-of-type(2){
                  font-size:0.18rem;
                  color: #4bc1fe;
                }
              }
              .num_right{
                float: left;
                width: 30%;
                height: 100%;
                position: relative;
                .box2{
                  width: 0.25rem;
                  height: 100%;
                  border:1px solid #818b98;
                  position: relative;
                  margin:auto;
                  .box2_inner{
                    width: 0.25rem;
                    height: 102%;
                    border:1px solid #818b98;
                    position: absolute;
                    top:0.01rem;
                    right:0.01rem;
                  }
                  .box2_inner_inner{
                    //带协条条的背景
                    width: 0.21rem;
                    height: 98%;
                    position: absolute;
                    top:0.02rem;
                    left:0;
                    overflow: hidden;
                    background-color: #142f5c;
                    img{
                      position: absolute;
                      left:50%;
                      -webkit-transform:translate(-50%) ;
                    }
                    img:nth-of-type(1){
                      top:72%;
                      //top:1.28rem;
                    }
                    img:nth-of-type(2){
                      //top:51%;
                      top:69%;
                    }
                    img:nth-of-type(3){
                      //top:47%;
                      top:66%;

                    }
                    img:nth-of-type(4){
                      //top:42%;
                      top:63%;
                      left:53%;


                    }
                    img:nth-of-type(5){
                      //top:38%;
                      top:60%;

                    }
                    img:nth-of-type(6){
                      //top:33%;
                      top:57%;
                      left:53%;
                    }
                    img:nth-of-type(7){
                      //top:29%;
                      top:54%;
                    }
                    img:nth-of-type(8){
                      //top:24%;
                      top:51%;
                      left:53%;
                    }
                    img:nth-of-type(9){
                      //top:20%;
                      top:48%;
                    }
                    img:nth-of-type(10){
                      //top:16%;
                      top:45%;

                    }
                    img:nth-of-type(11){
                      //top:11%;
                      top:42%;

                    }
                    img:nth-of-type(12){
                      //top:7%;
                      top:39%;
                      left:53%;

                    }
                    img:nth-of-type(13){
                      //top:3%;
                      top:36%;

                    }
                    img:nth-of-type(14){
                      //top:-2%;
                      top:33%;
                      left:53%;

                    }
                    img:nth-of-type(15){
                      //top:-6%;
                      top:30%;

                    }
                    img:nth-of-type(16){
                      //top:-11%;
                      top:27%;
                      left:53%;
                    }
                    img:nth-of-type(17){
                      //top:-15%;
                      top:24%;
                    }
                    img:nth-of-type(18){
                      //top:-20%;
                      top:21%;

                    }
                    img:nth-of-type(19){
                      //top:-24%;
                      top:18%;
                      left:53%;

                    }
                    img:nth-of-type(20){
                      //top:-29%;
                      top:15%;

                    }
                    img:nth-of-type(21){
                      top:12%;
                    }
                    img:nth-of-type(22){
                      top:9%;
                      left:53%;

                    }
                    img:nth-of-type(23){
                      top:6%;
                    }
                    img:nth-of-type(24){
                      top:3%;
                    }
                    img:nth-of-type(25){
                      top:0%;
                      left:53%;

                    }
                    img:nth-of-type(26){
                      top:-3%;
                    }
                    img:nth-of-type(27){
                      top:-6%;
                      left:53%;

                    }
                    img:nth-of-type(28){
                      top:-9%;
                    }
                   img:nth-of-type(29){
                      top:-12%;
                    }
                    img:nth-of-type(30){
                      top:-15%;
                      left:53%;
                    }
                    img:nth-of-type(31){
                      top:-18%;
                    }
                    img:nth-of-type(32){
                      top:-21%;
                    }
                    img:nth-of-type(33){
                      top:-24%;
                      left:53%;
                    }
                    img:nth-of-type(34){
                      top:-27%;
                    }
                    img:nth-of-type(35){
                      top:-30%;
                    }
                    img:nth-of-type(36){
                      top:-33%;
                    }
                    //img:nth-of-type(37){
                    //  top:-72%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(38){
                    //  top:-75%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(39){
                    //  top:-78%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(40){
                    //  top:-81%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(42){
                    //  top:-84%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(43){
                    //  top:-87%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(44){
                    //  top:-90%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(45){
                    //  top:-93%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(46){
                    //  top:-96%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(47){
                    //  top:-99%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(48){
                    //  top:-102%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(49){
                    //  top:-105%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(50){
                    //  top:-108%;
                    //  left:-14%;
                    //}
                    //



                  }
                }

              }
            }
          }
        }
        .count_num_bottom{
          width: 83%;
          margin: auto;
          height: 0.6rem;
          color:#1a89c3;
          font-size: 0.16rem;
          padding-top:0.1rem;
          .box{
            width: 100%;
            margin: auto;
            .rectangle_bg{
              width: 100%;
              height: 0.23rem;
              position: relative;
              background-color: #142f5d;
              .rectangle{
                height: 100%;
                width: 57%;
                background-color: #1a89c3;
                line-height: 0.23rem;
                position: absolute;
                top:0;
                left:0;
                padding-left:0.15rem;
                color:#fff;
                text-align: left;
                font-size: 0.2rem;
                span:nth-of-type(2){
                  font-size: 0.14rem;
                }
              }
            }
          }

        }
      }
    }
    .kp_notice{
      width: 4.9rem;
      height: 2.65rem;
      float: left;
      .kp_line_title{
        position: relative;
        width:1.2rem;
        //margin-left:0.4rem;
        margin-bottom: 0.2rem;
        img{
          width: 100%;
        }
        p:nth-of-type(1){
          position: absolute;
          width: 3rem;
          font-size:0.06rem;
          left:0.6rem;
          top:0.02rem;
          color:#2d6c8c;
        }
        p:nth-of-type(2){
          width: 3rem;
          position: absolute;
          font-size: 0.24rem;
          color: #4bc1fe;
          left:0.6rem;
          top:0.15rem;
        }
      }
      .notice_con{
        width: 100%;
        height: 90%;
        margin-top: -0.3rem;
        background-image: url(../images/notice.png);
        background-repeat: round;
        .notice_con_title{
          width: 100%;
          font-size: 0.18rem;
          font-weight: 700;
          text-align: center;
          padding-top: 0.06rem;
          color: #4bc1fe;
        }
        .notice_con_list{
          width: 85%;
          height: 67%;
          margin:auto;
          margin-top:0.15rem;
          p{
            text-indent: 0.32rem;
            font-size: 0.16rem;
            color: #4bc1fe;
            margin-bottom: 0.1rem;
          }
        }


      }
    }
    .kp_star{
      width: 4.9rem;
      height: 3rem;
      float: left;
      margin-left:0.4rem;
      .kp_line_title{
        position: relative;
        width:1.2rem;
        margin-bottom: 0.2rem;
        img{
          width: 100%;
        }
        p:nth-of-type(1){
          position: absolute;
          width: 3rem;
          font-size:0.06rem;
          left:0.6rem;
          top:0.02rem;
          color:#2d6c8c;
        }
        p:nth-of-type(2){
          width: 3rem;
          position: absolute;
          font-size: 0.24rem;
          color: #4bc1fe;
          left:0.6rem;
          top:0.15rem;
        }
      }
      .star_con{
        width: 4.8rem;
        height: 2.4rem;
        margin-top: -0.3rem;
        padding:0.4rem 0.25rem 0.3rem 0.6rem;
        background-image: url(../images/star/star_bg.png);
        background-repeat: round;
        .star_con_out{
          width: 100%;
          height: 100%;
          //border:1px solid red;
          .star_con_left{
            float: left;
            width: 56%;
            height: 100%;
            padding-top: 0.1rem;
            border-left:1px solid #284064;
            ul{
              margin-left:-0.2rem;
              li{
                width: 100%;
                //height: 0.4rem;
                //line-height: 0.4rem;
                color: #4bc1fe;
                font-size: 0.18rem;
                margin-bottom: 0.25rem;
                span{
                  float: left;
                }
                span:nth-of-type(1){
                  width: 0.4rem;
                  margin-top: -0.08rem;
                  margin-right: 0.1rem;
                  img{
                    width: 100%;
                  }
                }
              }

            }
          }
          .star_con_right{
            float: left;
            width: 42%;
            height: 100%;
            padding-top: 0.2rem;
            //border:1px solid yellow;
            .star_code{
              width: 0.79rem;
              margin: auto;
              margin-bottom:-0.1rem;
              img{
                width: 100%;
              }
            }
            .star_code_des{
              width: 100%;
              height: 0.7rem;
              padding-top: 0.08rem;
              background-image: url(../images/star/code_bg.png);
              background-repeat: round;
              text-align: center;
              font-size:0.14rem;
              color:#4392bd;

            }

          }
        }
      }

    }
    .kp_recommend{
      width: 4rem;
      height: 3.4rem;
      margin-top: -0.6rem;
      margin-left:-0.2rem;
      float: left;
      padding: 0.2rem 0 0 0;
      //border:1px solid red;
      .kp_line_title{
        position: relative;
        float: left;
        width: 0.7rem;
        img{
          width: 100%;
        }
        p:nth-of-type(1){
          position: absolute;
          width: 0.05rem;
          font-size: 0.1rem;
          right:0;
          top:0.3rem;
          color:#2d6c8c;
          -webkit-transform: rotateZ(90deg)
        }
        p:nth-of-type(2){
          width: 0.2rem;
          position: absolute;
          font-size: 0.24rem;
          color: #4bc1fe;
          left:50%;
          top:0.25rem;
        }
      }
      .recommend_con{
        float: left;
        width: 3.18rem;
        height: 3.18rem;
        .recommend_con_circle5{
          width: 100%;
          height: 100%;
          position: relative;
          background-image: url("../images/recommend/circle5.png");
          background-repeat: round;
          padding:0.21rem 0.6rem 0.5rem 0.18rem;
          .circle_mother{
            width: 2.58rem;
            height: 2.58rem;
            //border:1px solid red;
            border-radius: 50%;
            position: relative;
            div{
              position: absolute;
              left:50%;
              top:50%;
              -webkit-transform:translate(-50%,-50%);
            }
            .recommend_con_circle4{
              width: 2.56rem;
              height: 2.47rem;
              background-image: url("../images/recommend/circle4.png");
              background-repeat: round;
            }
            .recommend_con_circle{
              width: 2.38rem;
              height: 2.38rem;
              background-image: url("../images/recommend/4.png");
              background-repeat: round;
            }
            .recommend_con_circle3{
              width:2.2rem;
              height:2.2rem;
              background-image: url("../images/recommend/circle3.png");
              background-repeat: round;
            }
            .recommend_con_circle2{
              width: 2rem;
              height: 2rem;
              background-image: url("../images/recommend/circle2.png");
              background-repeat: round;
            }
            .recommend_con_circle1{
              width: 1.9rem;
              height: 1.9rem;
              background-image: url("../images/recommend/circle1.png");
              background-repeat: round;
            }
            .recommend_con_book{
              width: 1.2rem;
              img{
                width: 100%;
              }

            }
          }
          .recommend_sao_title{
            position: absolute;
            right:-0.6rem;
            top:0.55rem;
            color: #4bc1fe;
            width: 2rem;
            height: 0.6rem;
            text-align: center;
            //border:1px solid red;
            -webkit-transform: rotateZ(45deg);
            font-size:0.22rem;
            span{
              float: left;
              margin-right:0.5em;
            }

            span:nth-of-type(1){
              -webkit-transform: rotateZ(-30deg);
            }
            span:nth-of-type(2){
              -webkit-transform: rotateZ(20deg);
              padding-top: -0.5em;


            }
            span:nth-of-type(3){
              -webkit-transform: rotateZ(15deg);
            }
            span:nth-of-type(4){
              -webkit-transform: rotateZ(40deg);
              padding-top: 0.5em;
            }




          }
          .recommend_sao_num{
            position: absolute;
            right:0.1rem;
            bottom:0.4rem;
            color: #4bc1fe;
            text-align: right;
            font-size:0.14rem;
            #two_code{
              font-size:0.22rem;
            }
          }
          .recommend_bot{
            position: absolute;
            left:46%;
            bottom:0.02rem;
            -webkit-transform: translate(-50%);
            font-size:0.18rem;
            color: #4bc1fe;

          }

        }








        ///以前写死的布局
        //.recommend_con_circle5{
        //  //width: 372px;
        //  //height: 372px;
        //  //background-image: url(../images/recommend/circle5.png);
        //  //background-repeat: round;
        //  position: absolute;
        //
        //  width: 80%;
        //  background-image: url(../images/recommend/circle5.png);
        //  //background-repeat: round;
        //
        //
        //  padding:24px 0 0 16px;
        //  position: relative;
        //  //.recommend_con_circle4{
        //  //  width: 308px;
        //  //  height: 308px;
        //  //  background-image: url(../images/recommend/circle4.png);
        //  //  background-repeat: round;
        //  //  padding:9px 0 0 7px;
        //  //  .recommend_con_circle{
        //  //    width: 290px;
        //  //    height: 290px;
        //  //    border:1px dashed #275a76;
        //  //    border-radius: 50%;
        //  //    padding:4px 0 0 4px;
        //  //    .recommend_con_circle3{
        //  //      width: 281px;
        //  //      height: 281px;
        //  //      background-image: url(../images/recommend/circle3.png);
        //  //      background-repeat: round;
        //  //      padding:17px 0 0 16px;
        //  //      .recommend_con_circle2{
        //  //        width: 248px;
        //  //        height: 248px;
        //  //        background-image: url(../images/recommend/circle2.png);
        //  //        background-repeat: round;
        //  //        padding:10px 0 0 10px;
        //  //        .recommend_con_circle1{
        //  //          width: 226px;
        //  //          height: 226px;
        //  //          background-image: url(../images/recommend/circle1.png);
        //  //          background-repeat: round;
        //  //
        //  //        }
        //  //
        //  //
        //  //      }
        //  //    }
        //  //  }
        //  //}
        //  //.recommend_con_book{
        //  //  width: 150px;
        //  //  height: 202px;
        //  //  position: absolute;
        //  //  top:50%;
        //  //  left:50%;
        //  //  -webkit-transform:translate(-62%,-54%) ;
        //  //}
        //
        //}

      }

    }
  }
}